/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog :title="titleFront + '风险评估任务'" :visible.sync="show" append-to-body width="50%" :before-close="handleClose">
    <el-form :model="formInline" :inline="true">
      <el-row>
        <el-col :span="12">
          <el-form-item label="市选择">
            <el-select
              v-model="formInline.cityId"
              value-key="id"
              filterable
              clearable
              :disabled="formInline.type === 'detail'"
              style="width: 200px"
              @change="changeCity"
            >
              <el-option
                v-for="item in optionsListCity"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="区选择" v-if="optionsListDist">
            <el-select
              v-model="formInline.districtId"
              value-key="id"
              filterable
              clearable
              :disabled="formInline.type === 'detail'"
              style="width: 200px"
              @change="changeDist"
            >
              <el-option
                v-for="item in optionsListDist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="站选择">
            <el-select
              v-model="formInline.stationId"
              value-key="id"
              filterable
              clearable
              :disabled="formInline.type === 'detail'"
              style="width: 200px"
              @change="changeStation"
            >
              <el-option
                v-for="item in optionsListStation"
                :key="item.id"
                :label="item.staName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="桩选择">
            <el-select
              v-model="formInline.stakeId"
              value-key="id"
              filterable
              clearable
              :disabled="formInline.type === 'detail'"
              style="width: 200px"
            >
              <el-option
                v-for="item in optionsListState"
                :key="item.id"
                :label="item.devName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="对象类型：" v-show="formInline.type !== 'detail'">
            <el-select
              v-model="formInline.objectType"
              value-key="id"
              filterable
              @change="changeType"
            >
              <el-option
                v-for="item in optionsList"
                :key="item.id"
                :label="item.itemObjectName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="评估算法模型：" v-if="modelData">
            <el-select
              v-model="formInline.modelId"
              value-key="id"
              filterable
              clearable
              :disabled="formInline.type === 'detail'"
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in modelData"
                :key="item.id"
                :label="item.modelName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务名称：">
            <span v-if="formInline.type === 'detail'">{{formInline.jobName}}</span>
            <el-input v-else v-model="formInline.jobName" placeholder="请输入任务名称" maxlength="100" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型：">
            <el-select
              v-model="formInline.jobType"
              value-key="id"
              filterable
              :disabled="formInline.type === 'detail'"
            >
              <el-option
                v-for="item in jobTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务描述：">
            <span v-if="formInline.type === 'detail'">{{formInline.jobDesc}}</span>
            <el-input v-else v-model="formInline.jobDesc" placeholder="请输入任务描述" maxlength="200" show-word-limit></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行时间：">
            <span v-if="formInline.type === 'detail'">{{formInline.jobRunTime}}</span>
            <el-date-picker v-else v-model="formInline.jobRunTime" type="datetime" align="center" placeholder="选择执行时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="执行周期：">
            <span v-if="formInline.type === 'detail'">{{formInline.jobPeriod + '天'}}</span>
            <el-input v-else v-model="formInline.jobPeriod" placeholder="请输入执行周期" maxlength="10"><i slot="suffix">天</i></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行次数：">
            <span v-if="formInline.type === 'detail'">{{formInline.jobFrequency + '次'}}</span>
            <el-input v-else v-model="formInline.jobFrequency" placeholder="请输入执行次数" maxlength="10"><i slot="suffix">次</i></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="checkBtn" v-if="formInline.type !== 'detail'">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getRiskModelQuery} from "../../api/risk/riskModel";
import {getItemDictObject} from "../../api/risk/commonDict";
import {plan, warn} from "../../api/inspection/apiUntil";

export default {
  props: ['ItemDialogShow', 'taskParam'], //接受父组件传递过来的数据
  data() {
    return {
      show: false, //弹窗默认隐藏
      optionsListCity: [],
      optionsListDist: [],
      optionsListStation: [],
      optionsListState: [],
      formInline: {
        jobName:'',
        jobType:'',
        objectType:'',
        jobDesc: '',
        modelId: '',
        jobRunTime: '',
        jobPeriod: '',
        jobFrequency: '',
      },
      modelData: [],
      jobTypeList:[
        {
          name:'例行评估',
          value:'0'
        },
        {
          name:'专项评估',
          value:'1'
        },
      ],
      optionsList:[],
      titleFront: '查看'
    };
  },
  mounted() {
    //显示弹窗
    this.initList()
    this.getPlanCity()
    this.formInline = JSON.parse(JSON.stringify(this.taskParam))
    if (this.formInline.type === 'add') {
      this.titleFront = '新建'
    } else if (this.formInline.type === 'detail') {
      this.initModelList()
    }
    this.show = this.ItemDialogShow
  },
  methods: {
    //城市列表
    getPlanCity() {
      plan.getPlanCity().then((res) => {
        this.optionsListCity = res.data
        this.initDist()
      })
    },
    changeCity() {
      this.formInline.districtId = ''
      this.initDist()
    },
    initDist() {
      if (this.optionsListCity && this.formInline.cityId) {
        this.optionsListDist = this.optionsListCity.find(city => city.id === this.formInline.cityId).children
      }
      if (this.formInline.districtId) {
        this.initStat()
      }
    },
    changeDist() {
      this.formInline.stationId = ''
      this.formInline.stakeId = ''
      this.initStat()
    },
    initStat() {
      let params = {
        id: this.formInline.districtId
      }
      plan.getPlanStat(params).then((res) => {
        this.optionsListStation = res.data
        if (this.formInline.stationId) {
          this.changeStation()
        }
      })
    },
    changeStation() {
      let params = {
        id: this.formInline.stationId
      }
      warn.getWarnStake(params).then((res) => {
        this.optionsListState = res.data
      })
    },
    handleClose() {
      //关闭弹窗
      this.show = false
      this.$emit('closeDialog')
    },
    checkBtn() {
      //确定按钮
      if (this.checkParam()) {
        this.$emit('selectData', this.formInline)   //发送数据到父组件
        this.handleClose()
      }
    },
    checkParam() {
      if (!this.formInline.jobName) {
        this.$message({message: '请输入任务名称', type: 'warning'})
        return false
      }
      if (!this.formInline.jobType) {
        this.$message({message: '请选择任务类型', type: 'warning'})
        return false
      }
      if (!this.formInline.objectType) {
        this.$message({message: '请选择对象类型', type: 'warning'})
        return false
      }
      if (!this.formInline.jobDesc) {
        this.$message({message: '请输入任务描述', type: 'warning'})
        return false
      }
      if (!this.formInline.modelId) {
        this.$message({message: '请选择算法模型', type: 'warning'})
        return false
      }
      if (!this.formInline.jobRunTime) {
        this.$message({message: '请选择运行时间', type: 'warning'})
        return false
      }
      if (!this.formInline.jobPeriod) {
        this.$message({message: '请输入任务执行周期', type: 'warning'})
        return false
      }
      if (!this.formInline.jobFrequency) {
        this.$message({message: '请输入任务执行频率', type: 'warning'})
        return false
      }
      return true
    },
    changeType(type) {
      this.formInline.modelId = ''
      this.initModelList(type)
    },
    initList() {
      getItemDictObject().then((res)=>{
        if(res){
          this.optionsList = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    async initModelList(type) {
      let params = {
        modelType: type,
        isReady: 1,
        source: 'web'
      }
      await getRiskModelQuery(params).then((res)=>{
        if(res){
          this.modelData = res.modelList
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    }
  }
};
</script>

<style scoped>

</style>
